<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../src/lala-ui.css">
    <title>表单元素</title>
</head>
<body>
    <!-- 内容区 -->
    <div class="tt-content">
        <h1 class="tt-panel-title">Pabel标题</h1>
        <div class="tt-panel-body">
            Panel内容
        </div>

        <!-- 基本输入框 -->
        <h1 class="tt-panel-title">基本输入框：</h1>
        <div class="tt-panel-body no-padding">
            <div class="tt-form-item">
                <label class="tt-form-label">用户名</label>
                <div class="tt-form-body">
                    <input class="tt-input" type="text" placeholder="请输入用户名">
                    <i class="fa fa-times tt-input-reset"></i>
                </div>
            </div>

            <div class="tt-form-item">
                <label class="tt-form-label">密码</label>
                <div class="tt-form-body">
                    <input class="tt-input" type="password" placeholder="请输入密码">
                    <i class="fa fa-exclamation tt-input-warning"></i>
                </div>
            </div>

            <div class="tt-form-item">
                <label class="tt-form-label">日期</label>
                <div class="tt-form-body">
                    <input class="tt-input" type="date" placeholder="请选择日期">
                </div>
            </div>
        </div>

        <!-- 单选输入 -->
        <h1 class="tt-panel-title">单选：</h1>
        <div class="tt-panel-body no-padding">
            <div class="tt-form-item">
                <div class="tt-radio">
                    <i class="fa fa-check tt-radio-icon"></i>
                    <span class="tt-radio-desc">单选1</span>
                    <input class="tt-radio-input" type="radio">
                </div>
            </div>

            <div class="tt-form-item">
                <div class="tt-radio checked">
                    <i class="fa fa-check tt-radio-icon"></i>
                    <span class="tt-radio-desc">单选2</span>
                    <input class="tt-radio-input" type="radio">
                </div>
            </div>

            <div class="tt-form-item">
                <div class="tt-radio">
                    <i class="fa fa-check tt-radio-icon"></i>
                    <span class="tt-radio-desc">单选3</span>
                    <input class="tt-radio-input" type="radio">
                </div>
            </div>
        </div>

        <!-- 多选输入 -->
        <h1 class="tt-panel-title">多选：</h1>
        <div class="tt-panel-body no-padding">
            <div class="tt-form-item">
                <div class="tt-check">
                    <i class="fa fa-check tt-check-icon"></i>
                    <span class="tt-check-desc">多选1</span>
                    <input class="tt-check-input" type="checkbox">
                </div>
            </div>

            <div class="tt-form-item">
                <div class="tt-check checked">
                    <i class="fa fa-check tt-check-icon"></i>
                    <span class="tt-check-desc">多选2</span>
                    <input class="tt-check-input" type="checkbox">
                </div>
            </div>

            <div class="tt-form-item">
                <div class="tt-check">
                    <i class="fa fa-check tt-check-icon"></i>
                    <span class="tt-check-desc">多选3</span>
                    <input class="tt-check-input" type="checkbox">
                </div>
            </div>
        </div>
    </div>
</body>
</html>